var token = localStorage.getItem('mytoken');
var mydata = localStorage.getItem('data')


function getPage(page) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoon${page}`,
        type: 'get',
        headers: {
            token
        },
        data: {

        },
        success: (res) => {
            console.log(res);
        }
    })
}

getgroup(mydata)

//获取组
function getgroup(groupid) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoon?groupid=${groupid}&page=1&pageSize=51`,
        type: "GET",
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            getcarton(mydata, 1, 25);
            const _content = document.querySelector('.card');
            const li = document.createElement('li');
            _content.appendChild(li);

            for (const item of res.data) {
                // console.log(item);
                li.innerHTML += `
                <img src='http://192.168.3.184:7001/${item.img_path}' height='100' width='100' id='${item.id}'>
                <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                `

            }




        }
    })
}

function getcarton(groupid, page, pageSize) {
    // console.log(token_);
    $.ajax({
        url: `http://192.168.3.184:7001/cartoon?page=${page}&pageSize=${pageSize}`,
        type: "GET",
        headers: {
            token
            // : localStorage.getItem('mytoken')
        },
        data: {
            groupid,
            page,
            pageSize
        },
        success: function(res) {
            console.log(res);
            const _content = document.querySelector('.card');
            const showContent = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `


                <li class=hei>漫画图片</li>
               `
                const li = document.createElement('li');
                _content.appendChild(li);
                for (const item of res.data) {
                    // console.log(item);
                    li.innerHTML += `
                    <img src='http://192.168.3.184:7001/${item.img_path}' height='100' width='100' id='${item.id}'>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                    `
                }

                // let arr1 = [];
                // let arr2 = []
                // for (const item of res.data) {
                //     arr2.push(item.groupid);
                //     if (item.groupid === 1) {
                //         arr1.push(item.img_path);

                //     }
                // }
                // // cons
                // arr1.forEach((item) => {
                //     console.log(item);
                //     const img = document.createElement('img');
                //     img.src = `http://192.168.3.184:7001/${item}`

                // })

                // console.log(arr1);

                // res.data.forEach((item, index) => {
                //     const 
                //     if (item.groupid === 1) {

                //         const img = document.createElement('img');


                //     }
                //     // const time = getLocalTime(item.reg_time)
                //     //遍历计算方法，当前为第1页，一页2个，以此类推
                //     // if (item.groupid === 1) {
                //     //     tr.innerHTML = `
                //     //     <td><img class='hear' src='http://192.168.3.184:7001/${item.img_path}' />
                //     //     <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                //     //     <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                //     //     <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                //     //     </td>`
                //     //     _content.appendChild(tr)
                //     // }



                // })
            }
            showContent()

            //创建分页
            const pagel = document.querySelector('.page');
            console.log(pagel);
            const page = () => {
                // console.log(res.num);
                const pageCount = Math.ceil(res.num / pageSize);
                for (let i = 1; i <= pageCount; i++) {
                    const li = document.createElement('li');
                    li.id = `${i}`
                    li.innerHTML = `${i}`
                    pagel.appendChild(li)
                }
                const da = document.querySelectorAll('.page>li');
                da[0].className = 'lk'
                for (let i = 0; i < da.length; i++) {
                    da[i].addEventListener('click', function(e) {
                        $(e.target).attr('class', 'lk').siblings('li').attr('class', 'll')
                        getPage1(mydata, e.target.id, pageSize)
                            // getPer(e.target.id, pageSize)

                    })
                }


            }
            page();
        }

    })
}



//分页
function getPage1(groupid, page, pageSize) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoon`,
        type: 'get',
        headers: {
            token
        },
        data: {
            groupid,
            page,
            pageSize
        },
        success: (res) => {
            console.log(res);




            const _content = document.querySelector('.card');
            const shownewcont = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `


                <li class=hei>漫画图片</li>`
                const li = document.createElement('li');
                _content.appendChild(li);
                for (const item of res.data) {
                    // console.log(item);
                    li.innerHTML += `
                    <img src='http://192.168.3.184:7001/${item.img_path}' height='100' width='100' id='${item.id}'>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                    `
                }

            }
            shownewcont();
            const showContena = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>标题</th>
            
                <th>序号</th>
               
                <th>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    // if (index >= (cur - 1) * size && index < cur * size) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td>${item.title}</td>
                     
                        <td>${item.nshow}</td>
                      
                        <td>
                        <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                        <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                        <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                        </td>`
                    _content.appendChild(tr)
                        // }
                })
            }

            // showContena()
        }
    })
}
//删除
//删除
function perDe(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/rotation/${id}`,
        type: 'delete',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            // window.location.reload();
        }
    })

}


const man = document.querySelector('#form_a');
console.log(man);
const load = document.getElementById('load')
console.log(load);

//上传图片
load.addEventListener('change', function() {

    const fd = new FormData(man);

    // console.log(load.files[0]);
    fd.append('img', load.files[0]);
    // let yet = fd.get('wall');
    // console.log(yet);
    shangchuantu(fd)

})

//上传图片接口获取地址
function shangchuantu(formdata) {
    console.log(formdata);
    $.ajax({
        url: `http://192.168.3.184:7001/images`,
        type: 'post',
        headers: {
            token
        },
        contentType: false,
        processData: false,
        data: formdata,
        success: (res) => {
            console.log(1);
            console.log(res);
            localStorage.setItem('myimg', res.paths);

            // window.location.reload();
        }

    })
}

//返回
const ing = document.querySelector('.return');
ing.addEventListener('click', function() {
    // window.location.href = '后台漫画详情列表.html'
    history.go(-1);
})



//增加
function addc(nshow, img_path, groupid) {

    console.log(token);

    console.log(123123)
    $.ajax({
        url: `http://192.168.3.184:7001/cartoon`,
        type: 'post',
        headers: {
            token
        },
        data: {
            nshow,
            img_path,
            groupid
        },
        success: (res) => {
            console.log(res)
                // console.log(res.row.img_path);
                // localStorage.setItem('myimg', res.row.portrait)

            // window.location.reload();
        }

    })
}

//删除
function delepe(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoon/${id}`,
        type: 'delete',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            window.location.reload();
        }
    })

}



//添加按钮
const add = document.querySelector('.add_')
    //文本框内容
const txt = document.querySelector('.search-txt');
//点击搜素
const a = document.querySelector('.search-btn');
//文本框
const ki = document.querySelectorAll('.ki');
//确认按钮
const su = document.querySelector('#su');
//取消
const cl = document.querySelector('#cl');
//添加模态框按钮
const o = document.querySelector('.o');
//获取表格



//获取详情信息
function pertail(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/rotation/${id}`,
        type: 'get',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            const ki = document.querySelectorAll('.ki');

            const biaoti = ki[0];
            const xuhao = ki[2];
            // console.log(renwu);
            biaoti.value = res.data.title;

            xuhao.value = res.data.nshow;
        }
    })
}

//修改
function gaikun(id, title, img_path, nshow) {
    $.ajax({
        url: `http://192.168.3.184:7001/rotation/${id}`,
        type: 'put',
        headers: {
            token
        },
        data: {
            id,
            title,
            img_path,
            nshow
        },
        success: (res) => {
            console.log(res);
            // window.location.reload();
        }
    })
}
var isper = 0;
const card = document.querySelector('.card');
card.addEventListener('click', function(e) {
    if (e.target.name === 'g') {
        const kal = e.target.dataset.id;
        isper = kal;
        // deleper(isper);
        pertail(isper)
        o.style.display = 'block'

    }
    //判断删除按钮
    if (e.target.name === 'delete') {
        const flag = confirm('是否删除?')
        if (flag == true) {
            console.log('你点了确认');
            console.log(e.target.id);

            delepe(e.target.id)
        } else(
            console.log('你点了取消')
        )
    }
})





add.addEventListener('click', function() {
    o.style.display = 'block';
    isper = 0;
})
su.addEventListener('click', function() {
    //获取各个文本框内容
    const biaoti = ki[0].value;
    // const chenghao = ki[1].value;
    const xuhao = ki[2].value;
    // const xiezhen = ki[3].value;
    // console.log(xiezhen);
    if (isper === 0) {
        const ss = localStorage.getItem('myimg')
        console.log(ss);
        // addzhang(fd)
        addc(biaoti, ss, xuhao)
        console.log(biaoti, ss, xuhao);
        o.style.display = 'none';

    } else {
        const ss = localStorage.getItem('myimg')
            // console.log(isper, renwu, chenghao, jiehsao, xiezhen);
        console.log(isper, biaoti, ss, xuhao);
        gaikun(isper, biaoti, ss, xuhao)
        o.style.display = 'none'
    }

})
cl.addEventListener('click', function() {
    o.style.display = 'none';
})


a.addEventListener('click', function() {
    ser(txt.value)
    console.log(txt.value);


})

//搜索
function ser(id) {
    console.log(id);

    $.ajax({
        url: `http://192.168.3.184:7001/cartoon/${id}`,
        type: 'get',
        headers: {
            token
        },
        data: {
            id
        },
        success: (res) => {
            console.log(res);
            const _content = document.querySelector('.card');

            const shownewcont = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `


                <li class=hei>漫画图片</li>`
                const li = document.createElement('li');
                _content.appendChild(li);
                // for (const item of res.data) {
                // console.log(item);
                li.innerHTML = `
                    <img src='http://192.168.3.184:7001/${res.data.img_path}' height='100' width='100' id='${res.data.id}'>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${res.data.id}' />
                    `
                    // }

            }
            shownewcont();
        }
    })
}